import { createRouter, createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

// 路由的格式
// interface IRouteRaw {
//     name?: string;
//     path: string;
//     component?: any;
//     children?: Array<IRouteRaw>;
// }

// RouteRecordRaw 内置的接口，用于定义路由
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
        redirect: '/Demo1',
        meta: { title: '首页' },
        children: [
            {
                path: '/Demo1',
                name: 'Demo1',
                component: () => import('@/components/demo/Demo1.vue'),
                meta: { title: '声明和使用数据' }
            },
            {
                path: '/Demo2',
                name: 'Demo2',
                component: () => import('@/components/demo/Demo2.vue'),
                meta: { title: '生命周期' }
            },
            {
                path: '/Demo3',
                name: 'Demo3',
                component: () => import('@/components/demo/Demo3.vue'),
                meta: { title: '数据监听' }
            }
        ]
    },
    {
        path: '/typescript',
        name: 'typescript',
        component: HomeView,
        redirect: '/TypeScript1',
        children: [
            {
                path: '/TypeScript1',
                name: 'TypeScript1',
                component: () => import('@/components/ts/TsDemo1.vue'),
                meta: { title: '数据声明' }
            },
            {
                path: '/TypeScript2',
                name: 'TypeScript2',
                component: () => import('@/components/ts/TsDemo2.vue'),
                meta: { title: '函数' }
            },
            {
                path: '/TypeScript3',
                name: 'TypeScript3',
                component: () => import('@/components/ts/TsDemo3.vue'),
                meta: { title: 'Props/emit/Expose' }
            }
        ]
    },
    {
        path: '/about',
        name: 'about',
        component: AboutView
    }
];

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
});

export default router;
